<template>
  <j-form-container :disabled="disabled">
    <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="订单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.dingdbh" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="保单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.baodh" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="被保险人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.beibxr" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="被保险人联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.beibxrlxdh" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="被保险人邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.beibxryx" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="被保险人地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.beibxrdz" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="被保险车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.bebxcph" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="车型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.chelmc" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="初登日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.chudrq" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="行驶里程" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.xingslc" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="使用性质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.shiyxz" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="起保日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.qibrq" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="终保日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.zhongbrq" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="赔付限额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-input v-model="model.peifxe" placeholder=""></a-input>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="24">
            <a-form-model-item label="保障内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="baoznr">
              <a-input v-model="model.baoznr" placeholder="请输入保障内容"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="免责条款" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mianztk">
              <a-input v-model="model.mianztk" placeholder="请输入免责条款"></a-input>
            </a-form-model-item>
          </a-col> -->
        <a-col :span="24">
          <a-form-model-item label="电子保单下载地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dianzbdxzdz">
            <a-input v-model="model.dianzbdxzdz" placeholder="请输入电子保单下载地址"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="审核图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <a-upload
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
            >
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-form-container>
</template>
<script>
import { getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
export default {
  name: 'KuybOrderPolicyForm',
  components: {},
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [],
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      validatorRules: {},
      confirmLoading: false,
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },

    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },

    initFormData(url, id) {
      this.clearFormData()
      if (!id) {
        this.edit(this.modelDefault)
      } else {
        getAction(url, { id: id }).then((res) => {
          if (res.success) {
            let records = res.result
            if (records && records.length > 0) {
              console.log(records[0])
              this.edit(records[0])
            }
          }
        })
      }
    },
    edit(record) {
      this.model = Object.assign({}, record)
      console.log('KuybOrderPolicyForm-edit', this.model)
      
      this.fileList = [
        {
          uid: '1',
          url: this.model.xignsz
        },
        {
          uid: '2',
          url: this.model.yibp
        }
      ]
    },
    getFormData() {
      let formdata_arr = []
      this.$refs.form.validate((valid) => {
        if (valid) {
          let isNullObj = true
          Object.keys(this.model).forEach((key) => {
            if (this.model[key]) {
              isNullObj = false
            }
          })
          if (!isNullObj) {
            formdata_arr.push(this.model)
          }
        } else {
          this.$emit('validateError', '订单和保单表单校验未通过')
        }
      })
      return formdata_arr
    },
    validate(index) {
      return new Promise((resolve, reject) => {
        // 验证主表表单
        this.$refs.form.validate((valid) => {
          !valid ? reject({ error: VALIDATE_NO_PASSED, index }) : resolve()
        })
      })
        .then((values) => {
          return Promise.resolve()
        })
        .catch((error) => {
          return Promise.reject(error)
        })
    },
    clearFormData() {
      this.$refs.form.clearValidate()
    },
  },
}
</script>
